<!DOCTYPE HTML>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body th:style="${'background-color:' + backgroundColor }">
<div style="margin: 30px auto 0 30px;">
    <div id="inputSection">
        <label>请输入网址：</label>
        <input id="inputArea" style="width: 200px;height: 20px;"/>
        <button id="btnStart">开始调用</button>
    </div>
    <div id="resultSection" style="margin-top: 30px; border-top: 1px solid #eaeaea;">
    </div>
</div>
<script charset="utf-8" >
    $('#btnStart').click(() => {
      const url = $('#inputArea').val();
      $('#resultSection').empty();
      fetchVal(url);
    });

    const getDateTime = () => {
      const  myDate = new Date;
      const year = myDate.getFullYear(); //获取当前年
      const month = myDate.getMonth() + 1; //获取当前月
      const date = myDate.getDate(); //获取当前日
      const hours = myDate.getHours();
      const minutes = myDate.getMinutes();
      const seconds = myDate.getSeconds();
      return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
    };

    const fetchVal = (url) => {
      $.ajax(url,  {

        success: (data) => {
          $('#resultSection').append(`<p>${getDateTime()} 返回 ${data}</p>`);
          setTimeout(() => {
            fetchVal(url);
          }, 500);
        },
        error: (errorThrown) => {
          $('#resultSection').append(`<p>${getDateTime()} 返回 ${errorThrown.responseText}</p>`);
          setTimeout(() => {
            fetchVal(url);
          }, 500);
        },
      });
    };
  </script>
</body>
</html>